<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>Title</title>
</head>
<body>
    <input placeholder="请输入index" id="index"/>
    <input placeholder="请输入max" id="max"/>
    <button onclick="submitCalc()">计算</button>
</body>
</html>
<script>

    function calc(index,maxNum){
        index = index !== undefined ? index : 1;
        maxNum = maxNum !== undefined ? maxNum : 8;
        var numArr = calcNumArr(index,maxNum);
        var arr_index = 0;
        if (index !== 0){
            arr_index = index % 4 === 0 ? 4 : index % 4;
        }
        console.log(numArr[arr_index - 1]);
    }

    function calcNumArr(index,maxNum){
        var a ;
        if (index % 4 === 0){
            a = Math.floor((index - 1) / 4);
        }else {
            a = Math.floor(index / 4);
        }
        var firstNum = maxNum - (a * 2);
        var secondNum = firstNum - 2;
        var thirdNum = secondNum + 1;
        var fourthNum = thirdNum - 2;
        return [firstNum,secondNum,thirdNum,fourthNum];
    }
    function submitCalc() {
        var index_value = document.getElementById("index").value;
        var max_value = document.getElementById("max").value;
        calc(index_value,max_value);
    }


</script>